<template>
	<view class="exhibitors">
		<view class="top">
			<!-- <icon type="search" size="12" class="iconSearch" />
			<input class="uni-input" confirm-type="search" placeholder-style="color:#999999;font-size:24rpx;padding-left:0rpx;box-sizing:border-box;margin-left:250rpx;"
			 placeholder="请输入关键词" cursor="20rpx" /> -->
			 <div class="search">
			   <i class="iconfont iconsousuo"></i>
			   <input
			     class="uni-input"
			     confirm-type="search"
			     placeholder-style="color:#999999;font-size:24rpx;padding-left:0rpx;box-sizing:border-box;"
			     placeholder="请输入关键词"
			     cursor="20rpx"
			   />
			 </div>
		</view>
		<!-- 中间下拉列表 -->
		<view class="listcontainer">
			<!-- 列表头部 -->
			<view class="top">
				<view class="topitem" @click="all(1)" :class="{color:num === 1}">
					<span class="title">全部展商</span>
					<i class="iconfont" v-if="!one">&#xe612;</i>
					<i class="iconfont" v-else>&#xe649;</i>
				</view>
				<view class="topitem" @click="centertype(2)" :class="{color:num === 2}">
					<span class="title">类型</span>
					<i class="iconfont" v-if="!two">&#xe612;</i>
					<i class="iconfont" v-else>&#xe649;</i>
				</view>
				<view class="topitem" @click="state(3)" :class="{color:num === 3}">
					<span class="title">国家/地区</span>
					<i class="iconfont" v-if="!three">&#xe612;</i>
					<i class="iconfont" v-else>&#xe649;</i>
				</view>
				<view class="topitem" @click="letter(4)" :class="{color:num === 4}">
					<span class="title">字母</span>
					<text class="iconfont">&#xe604;</text>
				</view>
				<view class="topitem" @click="PV(5)" :class="{color:num === 5}">
					<span class="title">访问量</span>
				</view>
			</view>
			<!-- 下拉项 -->
			<!-- 全部展商下拉 -->
			<view class="exhibitsList" :class="{active:one}">
				<view class="listitem" v-for="(item,index) in exhibits" :key="index">
					{{item}}
				</view>
			</view>
			<!-- 类型下拉 -->
			<view class="exhibitsList" :class="{active:two}">
				<view class="listitem" v-for="item in type" :key="item.id">
					{{item.text}}
				</view>
			</view>
			<!-- 国家地区 -->
			<view class="exhibitsList" :class="{active:three}">
				<view class="listitem" v-for="item in nation" :key="item.id">
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- 展商每一项 -->
		<view class="itembox" v-for="(item,index) in exhibitsList" :key="index">
			<!-- 左侧logo -->
			<view class="left">
				<image :src="item.url" mode=""></image>
			</view>
			<!-- 中间盒子 -->
			<view class="center">
				<!-- 上部分名称 -->
				<view class="logotitle">
					<view class="test">
						{{item.title}}
					</view>
					<view class="jichang" v-for="(logo,index) in item.jichaung" :key="index">
						{{logo}}
					</view>
				</view>
				<!-- 中间描述 -->
				<view class="detail">
					{{item.detail}}
				</view>
				<!-- 底部icon -->
				<view class="bottom">
					<i class="iconfont">&#xe64e;</i>
					<span>35222</span>
				</view>
			</view>
			<!-- 右侧关注 -->
			<view class="right">
				关注
			</view>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="isMask">
		</view>
		<!-- 头部遮罩 -->
		<view class="topmask" v-if="isMask">

		</view>
	</view>
</template>
<script>
	export default {
		name: "",
		components: {},
		data() {
			return {
				one: true,
				two: true,
				three: true,
				num: 0,
				exhibits: ['车床', '铣床', '镗床', '磨床', '齿轮加工机床',
					'钻削和攻丝机床', '组合机床及部件', '加工中心及并联机床',
					'其它机床', '成形机床', '特种加工机床', '数控系统、数显装置',
					'锯床、插床、拉床和', '制造单元/系', '机床零部件及配套件',
					'数控系统、数显装置', '磨料磨具、超硬材料', '刀具、共夹具及相关',
					'设计、制造、管理及服务', '软件及工程设计', '木工机械', '信息、咨询服务'
				], //全部展商数据
				type: [{
						id: 0,
						text: '全部'
					},
					{
						id: 1,
						text: '卧式车床'
					},
					{
						id: 2,
						text: '立式车床'
					},
					{
						id: 3,
						text: '多轴车床'
					},
					{
						id: 4,
						text: '多刀车床'
					},
					{
						id: 5,
						text: '超精车床'
					},
					{
						id: 6,
						text: '专用车床'
					},
					{
						id: 7,
						text: '车削中心'
					},
					{
						id: 8,
						text: '车/铣复合机床'
					},
					{
						id: 9,
						text: '其它'
					},
				],
				nation: [{
						id: 1,
						text: '全部'
					}, {
						id: 2,
						text: '中国内地'
					}, {
						id: 3,
						text: '中国香港'
					}, {
						id: 4,
						text: '中国台湾'
					}, {
						id: 5,
						text: '澳大利亚'
					}, {
						id: 6,
						text: '奥地利'
					}, {
						id: 8,
						text: '加拿大'
					},
					{
						id: 9,
						text: '捷克'
					},
					{
						id: 10,
						text: '丹麦'
					},
					{
						id: 11,
						text: '法国'
					},
					{
						id: 12,
						text: '德国'
					},
					{
						id: 13,
						text: '印度'
					},
					{
						id: 14,
						text: '以色列'
					},
					{
						id: 15,
						text: '意大利'
					},
					{
						id: 16,
						text: '日本'
					},
					{
						id: 17,
						text: '韩国'
					},
					{
						id: 18,
						text: '卢森堡'
					},
					{
						id: 19,
						text: '波兰'
					},
					{
						id: 20,
						text: '西班牙'
					},
					{
						id: 21,
						text: '瑞典'
					},
					{
						id: 22,
						text: '瑞士'
					},
					{
						id: 23,
						text: '英国'
					},
					{
						id: 24,
						text: '美国'
					},
					{
						id: 25,
						text: '葡萄牙'
					},
					{
						id: 26,
						text: '马来西亚'
					}
				],
				exhibitsList: [{
						url: require('../../static/image/logo-four@2x.png'),
						title: '秦川机床工具集团股份有限公司',
						detail: '秦川机床工具集团股份有限公司（简称“秦川机床”,股票代码：000837）是中国精密数控机床与复制',
						jichaung: ['机床']
					},
					{
						url: require('../../static/image/logo-one@2x.png'),
						title: '北京精雕集团',
						detail: '北京精雕科技集团成立于1994年，是一家专注于数控机床研发和制造的国家级高新技术企业，现有技术企业，现有技术企业，现有',
						jichaung: ['机床', '精雕']
					},
					{
						url: require('../../static/image/logo-two@2x.png'),
						title: '上海机床厂有限公司',
						detail: '上海机床厂有限公司是中国最大的精密磨床制造企业；在国内磨床业处于主导地位；产品的品种最为产品的品种最为产品的品种最为',
						jichaung: ['精雕']
					},
					{
						url: require('../../static/image/logo-four@2x.png'),
						title: '秦川机床工具集团股份有限公司',
						detail: '秦川机床工具集团股份有限公司（简称“秦川机床”,股票代码：000837）是中国精密数控机床与复制',
						jichaung: ['机床']
					},
					{
						url: require('../../static/image/logo-one@2x.png'),
						title: '北京精雕集团',
						detail: '北京精雕科技集团成立于1994年，是一家专注于数控机床研发和制造的国家级高新技术企业，现有技术企业，现有技术企业，现有',
						jichaung: ['机床', '精雕']
					},
					{
						url: require('../../static/image/logo-two@2x.png'),
						title: '上海机床厂有限公司',
						detail: '上海机床厂有限公司是中国最大的精密磨床制造企业；在国内磨床业处于主导地位；产品的品种最为产品的品种最为产品的品种最为',
						jichaung: ['精雕']
					},
				]
			};
		},
		created() {},
		computed: {
			isMask() {
				return this.one === false || this.two === false || this.three === false
			}
		},
		methods: {
			all(num) {
				this.one = !this.one
				this.two = true;
				this.three = true;
				if (this.one === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			centertype(num) {
				this.one = true;
				this.two = !this.two;
				this.three = true;
				if (this.two === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			state(num) {
				this.one = true;
				this.two = true;
				this.three = !this.three;
				if (this.three === false) {
					this.num = num
				} else {
					this.num = 0
				}
			},
			letter(num) {
				this.one = true;
				this.two = true;
				this.three = true;
				this.num = num;
			},
			PV(num) {
				this.one = true;
				this.two = true;
				this.three = true;
				this.num = num;
			}
		}
	};
</script>
<style lang='less' scoped>
	.exhibitors {
		position: relative;

		.top {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 60rpx;
			/* background: #007AFF; */
			z-index: 5;
			position: relative;
            .search{
              position: relative;
              z-index: 999;
              width:690rpx;
              margin: 15rpx auto;
              margin-bottom: 30rpx;
              display: flex;
              background:rgba(241,241,241,1) !important;
                border-radius:30rpx;
              i{
                font-size: 30rpx;
                line-height:60rpx;
                margin: 0 15rpx;
                color: #999999;
              }
              input{
                width:670rpx;
                height:60rpx;
                // background:rgba(241,241,241,1);
                // border-radius:30rpx;
                // padding-left: 40rpx;
                font-size: 30rpx;
                box-sizing: border-box; 
              }
                     
			.uni-input {
				background: rgba(241, 241, 241, 1);
				width: 690rpx;
				height: 60rpx;
				border-radius: 30rpx;
				margin: 0 auto;
			}

			.iconSearch {
				position: absolute;
				left: 230rpx;
				top: 20rpx;
			}
		}
}
		.listcontainer {
			width: 690rpx;
			/* height: 600rpx; */
			/* background: #B3D4FC; */
			margin-left: 30rpx;
			margin-top: 30rpx;

			.top {
				position: absolute;
				left: 11rpx;
				z-index: 5;
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				background: #FFFFFF;
				/* 	background: #DD524D; */
				margin-bottom: 20rpx;
				position: relative;

				.topitem {
					display: flex;
					align-items: center;
					height: 100%;
					justify-content: space-between;
					.title,.iconfont{
						font-size: 28rpx;
						line-height: 30rpx;
						align-items: center;
					}
					&.color {
						color: #F47C00;
					}

					span {
						margin-right: 5rpx;
					}

					i {
						margin-top: 13rpx;
					}
				}
			}


			.exhibitsList {
				position: absolute;
				left: 0rpx;
				top: 150rpx;
				width: 750rpx;
				margin-bottom: 33rpx;
				/* height: 100%; */
				background: #FFFFFF;
				overflow: hidden;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				z-index: 5;

				&.active {
					display: none;
				}

				.listitem {
					height: 45rpx;
					background: rgba(235, 235, 235, 1);
					border-radius: 23rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 45rpx;
					text-align: center;
					margin-top: 32rpx;
					padding: 0rpx 20rpx 0 20rpx;
				}
			}

		}




		.itembox {
			width: 750rpx;
			height: 174rpx;
			/* background: #0086B3; */
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 10rpx;
			border-top: 1px solid #EEEEEE;
			border-bottom: 1px solid #EEEEEE;
			display: flex;

			.left {
				width: 120rpx;
				height: 120rpx;
				margin-top: 29rpx;
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.center {
				width: 483rpx;
				height: 100%;

				/* background: #DF5000; */
				.logotitle {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					margin-bottom: 10rpx;

					.test {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(51, 51, 51, 1)
					}

					.jichang {
						width: 60rpx;
						height: 25rpx;
						border: 1px solid rgba(204, 204, 204, 1);
						border-radius: 13rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						text-align: center;
						line-height: 25rpx;
					}
				}

				.detail {
					width: 455rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 16rpx;
				}

				.bottom {
					width: 750rpx;
					display: flex;
					align-items: center;

					.iconfont {
						font-size: 28rpx;
						color: #CCCCCC;
						margin-right: 15rpx;
					}

					span {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.right {
				width: 85rpx;
				height: 40rpx;
				background: #F47C00;
				background: rgba(244, 124, 0, 1);
				border-radius: 20px;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 40rpx;
				text-align: center;
				margin-top: 66rpx;
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, .3);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.topmask {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 300rpx;
			background: #FFFFFF;
			z-index: 4;
		}
	}
</style>
